<!--/**
*碳素云通信录主界面
*@namespace View\Index
*@todo 完成主界面
*@version 1.0
*@copyright 碳素云信息技术有限责任公司<http://tansuyun.cn>
*@author 黄思齐<xiaogeqq1034@tansuyun.cn>
*
*/-->
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <title>碳素云通信录主界面</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="碳素云通信录主界面">
        <meta name="author" content="huangsiq"> 
        <script src="./Public/bootstrap-v3.2.0/js/jquery-1.11.1.min.js"></script>
        <link href="./Public/bootstrap-v3.2.0/css/bootstrap.css" rel="stylesheet">
        <script src="./Public/bootstrap-v3.2.0/js/bootstrap.js"></script>


        <style type="text/css">

            .profile{

                margin-right: 15px;
            }
            .hovercard {
                display: none;
                position: absolute;
                height: 150px;
                padding: 20px 60px 20px 20px;
            }

        </style>

    </head>
    <body style="font-family:'微软雅黑';">
        <div class="container">
            <!--首页导航条-->
            <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="navbar-header">

                    <a class="navbar-brand" href="#"><b>碳素云通信录
                        </b></a>
                </div>
                <div style="margin-right:60px;">
                    <p class="navbar-text navbar-right">


                        <b>用户：<a   data-toggle="modal" data-target="#myModal" style="cursor:pointer;">黄思齐</a></b>
                        <b><a   data-toggle="modal" data-target="#adduserModal" style="cursor:pointer;" >新用户添加</a></b> 
                        <b><a  href="__URL__/loginOut" style="cursor:pointer;" >退出</a></b>




                        </nav>
                        <!--首页导航条-END-->
                    <div class="row">
                        <!--前端部-->
                        <div class="col-md-6">
                            <div class="panel panel-danger panel-paper" style="margin-top: 100px;">
                                <div class="panel-heading">
                                    <!--标题-->
                                    <b style="font-size: 16px;">前端部</b>

                                </div>




                                <div class="panel-body">
                                    <!--人物信息添加-->
                                    <!--               <img src="../tansuyunContanct/Home/Controller/IMG/2.jpg">-->
                                    <foreach name="front" item="A">

                                        <img class="profile" name="{$A.UQQ}" alt="最代码官方的gravatar头像" src="../tansuyunContanct/Home/Controller/IMG/{$A.PicturePath}">

                                    </foreach>
                                    <!--人物信息添加-END-->
                                </div>
                            </div>
                        </div>
                        <!--前端部END-->

                        <!--        <foreach name="front" item="A">
                                     <p>{$A.UEmail}</p>
                                    <p> {$A.UQQ}</p>
                                   
                                </foreach>-->

                        <!--后端部-->
                        <div class="col-md-6">
                            <div class="panel panel-info panel-paper" style="margin-top: 100px;">
                                <div class="panel-heading">
                                    <!--标题-->
                                    <b style="font-size: 16px;">后端部</b>

                                </div>




                                <div class="panel-body">
                                    <!--人物信息添加-->






                                    <foreach name="back" item="B">

                                        <img class="profile" name="{$B.UQQ}" alt="最代码官方的gravatar头像" src="../tansuyunContanct/Home/Controller/IMG/{$B.PicturePath}">

                                    </foreach>



                                    <!--人物信息添加-END-->
                                </div>
                            </div>
                        </div>
                        <!--后端部END-->

                        <foreach name="back" item="B">
                            <div class="hovercard well" id="hovercard_{$B.UQQ}">
                                <div class="hovercontent">
                                    <div class="right_bar">
                                        <div class="user">
                                            <p><div class="pull-left">姓名：{$B.UName}</div><div class="pull-right"><a data-toggle="modal" data-target="#changeuserModal"style="cursor:pointer;" ><i class="glyphicon glyphicon-cog"></i></a>&nbsp;&nbsp;<a href="__URL__/deleteUser&UID={$B.UQQ}"><i class="glyphicon glyphicon-trash"></i></a></div></p><br>
                                            <p style="margin-top:10px;">电话：{$B.UTelePhoneNumber}</p>
                                            <p>QQ:{$B.UQQ}</p>
                                            <p>Email:{$B.UEmail}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </foreach>
                        <!--设计部-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel panel-success panel-paper" >
                                    <div class="panel-heading">
                                        <!--标题-->
                                        <b style="font-size: 16px;">设计部</b>

                                    </div>




                                    <div class="panel-body">
                                        <!--人物信息添加-->
                                        <foreach name="design" item="C">

                                            <img class="profile" name="{$C.UQQ}" alt="最代码官方的gravatar头像" src="../tansuyunContanct/Home/Controller/IMG/{$C.PicturePath}">

                                        </foreach>


                                        <!--人物信息添加-END-->
                                    </div>
                                </div>
                            </div>
                            <foreach name="design" item="C">
                                <div class="hovercard well" id="hovercard_{$C.UQQ}">
                                    <div class="hovercontent">
                                        <div class="right_bar">
                                            <div class="user">
                                                <p><div class="pull-left">姓名：{$C.UName}</div><div class="pull-right"><a data-toggle="modal" data-target="#changeuserModal"style="cursor:pointer;" ><i class="glyphicon glyphicon-cog"></i></a>&nbsp;&nbsp;<a href="__URL__/deleteUser&UID={$B.UQQ}"><i class="glyphicon glyphicon-trash"></i></a></div></p><br>
                                                <p style="margin-top:10px;">电话：{$C.UTelePhoneNumber}</p>
                                                <p>QQ:{$C.UQQ}</p>
                                                <p>Email:{$C.UEmail}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </foreach>
                            <!--设计部END-->
                            <!--市场部-->
                            <div class="col-md-6">
                                <div class="panel panel-primary panel-paper">
                                    <div class="panel-heading">
                                        <!--标题-->
                                        <b style="font-size: 16px;">市场部</b>

                                    </div>




                                    <div class="panel-body">
                                        <!--人物信息添加-->
                                        <foreach name="market" item="D">

                                            <img class="profile" name="{$D.UQQ}" alt="最代码官方的gravatar头像" src="../tansuyunContanct/Home/Controller/IMG/{$D.PicturePath}">

                                        </foreach>


                                        <!--人物信息添加-END-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <foreach name="market" item="D">
                            <div class="hovercard well" id="hovercard_{$D.UQQ}">
                                <div class="hovercontent">
                                    <div class="right_bar">
                                        <div class="user">
                                            <p><div class="pull-left">姓名：{$D.UName}</div><div class="pull-right"><a data-toggle="modal" data-target="#changeuserModal"style="cursor:pointer;" ><i class="glyphicon glyphicon-cog"></i></a>&nbsp;&nbsp;<a href="__URL__/deleteUser&UID={$B.UQQ}"><i class="glyphicon glyphicon-trash"></i></a></div></p><br>
                                            <p style="margin-top:10px;">电话：{$D.UTelePhoneNumber}</p>
                                            <p>QQ:{$D.UQQ}</p>
                                            <p>Email:{$D.UEmail}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </foreach>
                        <!--市场部END-->
                        <!--管理层-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel panel-info panel-paper" >
                                    <div class="panel-heading">
                                        <!--标题-->
                                        <b style="font-size: 16px;">行政部</b>

                                    </div>




                                    <div class="panel-body">
                                        <!--人物信息添加-->
                                        <foreach name="management" item="E">

                                            <img class="profile" name="{$E.UQQ}" alt="最代码官方的gravatar头像" src="../tansuyunContanct/Home/Controller/IMG/{$E.PicturePath}">

                                        </foreach>
                                        <!--人物信息添加-END-->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <foreach name="management" item="E">
                            <div class="hovercard well" id="hovercard_{$E.UQQ}">
                                <div class="hovercontent">
                                    <div class="right_bar">
                                        <div class="user">
                                            <p><div class="pull-left">姓名：{$E.UName}</div><div class="pull-right"><a data-toggle="modal" data-target="#changeuserModal"style="cursor:pointer;" ><i class="glyphicon glyphicon-cog"></i></a>&nbsp;&nbsp;<a href="__URL__/deleteUser&UID={$B.UQQ}"><i class="glyphicon glyphicon-trash"></i></a></div></p><br>
                                            <p style="margin-top:10px;">电话：{$E.UTelePhoneNumber}</p>
                                            <p>QQ:{$E.UQQ}</p>
                                            <p>Email:{$E.UEmail}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </foreach>
                        <foreach name="front" item="A">
                            <div class="hovercard well" id="hovercard_{$A.UQQ}">
                                <div class="hovercontent">
                                    <div class="right_bar">
                                        <div class="user">
                                            <p><div class="pull-left">姓名：{$A.UName}</div><div class="pull-right"><a data-toggle="modal" data-target="#changeuserModal"style="cursor:pointer;" ><i class="glyphicon glyphicon-cog"></i></a>&nbsp;&nbsp;<a href="__URL__/deleteUser&UID={$B.UQQ}"><i class="glyphicon glyphicon-trash"></i></a></div></p><br>
                                            <p style="margin-top:10px;">电话：{$A.UTelePhoneNumber}</p>
                                            <p>QQ:{$A.UQQ}</p>
                                            <p>Email:{$A.UEmail}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </foreach>
                        <!--管理部END-->



                        <script>

                            $(function()
                            {
                                $('#example2').tooltip();
                            });
                        </script>
                        <!-- Modal -->
                        <div class="modal fade  bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                        <h4 class="modal-title" id="myModalLabel">修改用户密码</h4>
                                    </div>  
                                    <form name="register" action="?s=Home/Index/changeUPassword" method="post" id="register_form" class="">
                                        <!--用户名-->

                                        <div class="modal-body">

                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-lock"></span>
                                                    </div>
                                                    <input name="userPassword" type="password" class="form-control" 
                                                           placeholder="输入您的旧密码" value="" id="inputUid">
                                                </div>
                                            </div>

                                            <!--密码-->
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-lock"></span>
                                                    </div>
                                                    <input name="newPassword" type="password" class="form-control"
                                                           placeholder="输入您的新密码" value="" id="inputPassword">
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-lock"></span>
                                                    </div>
                                                    <input name="rePassword" type="password" class="form-control"
                                                           placeholder="再次输入您的新密码" value="" id="inputrePassword">
                                                </div>
                                            </div>

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            <button type="submit" class="btn btn-primary">提交</button>

                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!--Model-END-->
                        <!--addnewusermodel-->
                        <div class="modal fade  bs-example-modal-sm" id="adduserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                        <h4 class="modal-title" id="myModalLabel">添加新用户</h4>
                                    </div>  
                                    <form action="?s=Home/Index/addNewUser" method="post"
                                          enctype="multipart/form-data">     <!--用户名-->

                                        <div class="modal-body">

                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-lock"></span>
                                                    </div>
                                                    <input name="UID" type="text" class="form-control" 
                                                           placeholder="请输入添加的账号" value="" >
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-user"></span>
                                                    </div>
                                                    <input name="userName" type="text" class="form-control" 
                                                           placeholder="请输入添加的用户名" value="" id="inputUid">
                                                </div>
                                            </div>

                                            <!--密码-->
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-earphone"></span>
                                                    </div>
                                                    <input name="userTelephoneNumber" type="text" class="form-control"
                                                           placeholder="请输入添加的电话" value="" >
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-globe"></span>
                                                    </div>
                                                    <input name="userQQ" type="text" class="form-control"
                                                           placeholder="请输入添加的QQ" value="" id="inputrePassword">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-envelope"></span>
                                                    </div>
                                                    <input name="userEmail" type="text" class="form-control"
                                                           placeholder="请输入添加的电子邮箱" value="" id="inputrePassword">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group">

                                                    <b>部门选择&nbsp;&nbsp;</b>
                                                    <select class="form-control" name="userDepartment">
                                                        <option value ="前端部">前端部</option>
                                                        <option value ="后端部">后端部</option>
                                                        <option value="设计部">设计部</option>
                                                        <option value="市场部">市场部</option>
                                                        <option value="管理层">管理层</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <label for="file">头像上传</label>
                                                <input type="file" name="file" id="file">
                                                <p class="help-block">请选择45*45的新用户头像进行上传</p>

                                            </div>

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            <input type="submit" class="btn btn-primary" name="submit" value="提交"/>

                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!--addnewusermodel-end-->
                        <!--addnewusermodel-->
                        <div class="modal fade  bs-example-modal-sm" id="changeuserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                        <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
                                    </div>  
                                    <form name="register" action="?s=Home/Index/updateUserBaseInforByUID" method="post" id="register_form" class="">
                                        <!--用户名-->

                                        <div class="modal-body">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-lock"></span>
                                                    </div>
                                                    <input name="UID" type="text" class="form-control" 
                                                           placeholder="请输入添加的账号" value="" id="inputUid">
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-user"></span>
                                                    </div>
                                                    <input name="userName" type="text" class="form-control" 
                                                           placeholder="请输入添加的用户名" value="" id="inputUid">
                                                </div>
                                            </div>

                                            <!--密码-->
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-earphone"></span>
                                                    </div>
                                                    <input name="userTelephoneNumber" type="text" class="form-control"
                                                           placeholder="请输入添加的电话" value="" id="inputPassword">
                                                </div>
                                            </div>

                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-globe"></span>
                                                    </div>
                                                    <input name="userQQ" type="text" class="form-control"
                                                           placeholder="请输入添加的QQ" value="" id="inputrePassword">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-addon">
                                                        <span class="glyphicon glyphicon-envelope"></span>
                                                    </div>
                                                    <input name="userEmail" type="text" class="form-control"
                                                           placeholder="请输入添加的电子邮箱" value="" id="inputrePassword">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="input-group">

                                                    <b>部门选择&nbsp;&nbsp;</b>
                                                    <select class="form-control" name="userDepartment">
                                                        <option value ="前端部">前端部</option>
                                                        <option value ="后端部">后端部</option>
                                                        <option value="设计部">设计部</option>
                                                        <option value="市场部">市场部</option>
                                                        <option value="管理层">管理层</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputFile">头像上传</label>
                                                <input type="file" id="exampleInputFile">
                                                <p class="help-block">请选择45*45的新用户头像进行上传</p>
                                            </div>


                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            <input type="submit" class="btn btn-primary" name="submit" value="提交"/>

                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!--addnewusermodel-end-->



                    </div>


                    <!--container-END-->
                    <div class="footer" style="margin-top: 50px;">
                        <hr/>
                        <!--页脚信息-->
                        <div class="text-center">
                            Copyright 碳素云信息技术有限责任公司<br/>
                            Powered by 碳素云信息技术有限责任公司
                            <br/>
                        </div>
                    </div>
                    <script type="text/javascript">

                        //     var link=".profile";
                        var hovercard;
                        $(function() {
                            var timeout;

                            $(".profile").hover(function() {

                                pos = $(this).offset();
                                hovercard = "#hovercard_" + $(this).attr('name');
                                timeout = setTimeout(function() {

                                    $(hovercard).fadeIn().css({
                                        'top': pos.top - 70 + 'px', // subtract 20px to account for padding
                                        'left': pos.left + 25 + 'px'
                                    });

                                }, 300);

                            }, function() {
                                clearTimeout(timeout);
                            });
                            // console.log(hovercard);
                            //
                            //      alert(hovercard);
                            $(".profile").mouseleave(function() {
                                var fadename = "#hovercard_" + $(this).attr('name');
                                setTimeout(function() {
                                    //   alert(fadename);
                                    $(fadename).fadeOut();
                                }, 2000);
                            });

                        });
                //    alert('ok');
                //$(".profile").hover(function(){
                //console.log($(this).attr('name'));
                ////alert($(this).attr('name'));
                ////hovercard_2
                //pos = $(this).offset();
                //$("#hovercard_"+$(this).attr('name')).fadeIn().css({
                //     'top': pos.top - 70 + 'px',  // subtract 20px to account for padding
                //      'left': pos.left + 25 + 'px'
                //     });
                // });
                    </script>
                    </body>
                    </html>
